<template>
    <div class="replyContainer">
        <div class="myReplyContent">
            <div class="back" @click="goBack"></div>
            <p class="title">匿名回复</p>
            <div class="other"></div>
        </div>
        <div class="allReplys">
            <ul class="replys">
                <li v-for="reply in replys" :key="reply.id">
                    <div class="reply">
                        <div class="allInfo">
                            <div class="replyImg"></div>
                            <div class="replyInfo">
                                <div class="user">
                                    <p class="name">{{ reply.userName }}</p>
                                    <p class="time" v-if="reply.nowDay&&ifShow(reply.id)">{{ reply.time }}</p>
                                    <p class="time" v-if="reply.yesterdayShow&&ifShow(reply.id)">昨天{{ reply.time }}</p>
                                    <p class="time" v-if="reply.sevenDayShow&&ifShow(reply.id)">{{replyDay(reply.id)}}天前</p>
                                    <p class="time" v-if="reply.beforeDayShow&&ifShow(reply.id)">{{ reply.canlendar }}</p>
                                </div>
                                <p class="haveReply">回复了你<span>{{ reply.say }}</span></p>
                                <div class="comment" v-if="reply.ifComment">
                                    <p class="commentContent">{{ reply.comment }}</p>
                                </div>
                            </div>
                        </div>
                        <div class="toReplyContainer">
                            <div class="replyContent">{{ reply.content }}</div>
                            <div class="toReply">
                                <div class="toReplyImg"></div>
                                <p class="toReplyTitle">回复</p>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <p class="noMore">—— &nbsp;没有更多啦&nbsp; ——</p>
    </div>
</template>

<script>
    export default {
        name:'myReply',
        data(){
            return{
                replys:[
                    {id:0,userName:'fish',nowDay:true,yesterdayShow:false,sevenDayShow:false,beforeDayShow:false,time:'9:27',canlendar:'2024-3-11',
                        comment:'多囊卵巢患者应该要改变饮食习惯,作...',content:'多囊患者求助,刚检查...',ifComment:false,say:'明白了'},
                    {id:1,userName:'Kakaoo',nowDay:true,yesterdayShow:false,sevenDayShow:false,beforeDayShow:false,time:'9:27',canlendar:'2024-3-9',
                        comment:'多囊卵巢患者应该要改变饮食习惯,作...',content:'多囊患者求助,刚检查...',ifComment:true,say:'还应该注意少吃高糖水果'},
                ]
            }
        },
        methods:{
            goBack(){
                this.$router.back()
            },
            ifShow(id){
                let myDate=new Date()
                let nowYear=myDate.getFullYear()+''
                let nowDay=myDate.getDate()+''
                let nowMonth=''+(myDate.getMonth()+1)
                for(let i=0;i<this.replys.length;i++){
                    if(id===this.replys[i].id){
                        let replyYear=(this.replys[i].canlendar.split('-'))[0]
                        let replyMonth=(this.replys[i].canlendar.split('-'))[1]
                        let replyDay=(this.replys[i].canlendar.split('-'))[2]
                        if(replyYear<replyYear){
                            this.replys[i].beforeDayShow=true
                            this.replys[i].nowDay=false
                            this.replys[i].yesterdayShow=false
                            this.replys[i].sevenDayShow=false
                        }
                        else if(replyYear===nowYear){
                            if(replyMonth<nowMonth){
                                this.replys[i].beforeDayShow=true
                                this.replys[i].nowDay=false
                                this.replys[i].yesterdayShow=false
                                this.replys[i].sevenDayShow=false
                            }
                            else if(replyMonth===nowMonth){
                                if(nowDay-replyDay>7){
                                    this.replys[i].beforeDayShow=true
                                    this.replys[i].nowDay=false
                                    this.replys[i].yesterdayShow=false
                                    this.replys[i].sevenDayShow=false
                                }
                                else if(nowDay===replyDay){
                                    this.replys[i].nowDay=true
                                    this.replys[i].yesterdayShow=false
                                    this.replys[i].sevenDayShow=false
                                    this.replys[i].beforeDayShow=false
                                }
                                else if(nowDay-replyDay<=7 && nowDay-replyDay>1){
                                    this.replys[i].sevenDayShow=true
                                    this.replys[i].nowDay=false
                                    this.replys[i].yesterdayShow=false
                                    this.replys[i].beforeDayShow=false
                                }
                                else if(nowDay-replyDay===1){
                                    this.replys[i].yesterdayShow=true
                                    this.replys[i].nowDay=false
                                    this.replys[i].sevenDayShow=false
                                    this.replys[i].beforeDayShow=false
                                }
                            }
                        }
                    }
                }
                return true
            }
        },
        computed:{
            replyDay(){
                return(id)=>{
                    for(let i=0;i<this.replys.length;i++){
                        if(id===this.replys[i].id){
                            let replyDay=(this.replys[i].canlendar.split('-'))[2]
                            let myDate=new Date()
                            let nowDay=myDate.getDate()+''
                            return nowDay-replyDay;
                        }
                    }
                }
            }
        }
    }
</script>


<style scoped>
    .replyContainer{
        width: 100vw;
        height: 100vh;
        overflow-x: hidden;
        overflow-y: scroll;
        scrollbar-width: none; 
    }
    .myReplyContent{
        width: 6.86rem;
        height: 1.76rem;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        left:.32rem;
        z-index: 1;
        background-color: #F6F8FA;
    }
    .back{
        background-image: url(../assets/img/6-icon@2x/back.png);
        width: .32rem;
        height: 0.32rem;
        background-position: center;
        background-size: contain;
    }
    .title{
        font-family: 'PingFangSC-Mediuem';
        color:#333333;
        font-size: .36rem;
    }
    .other{
        width: .32rem;
        height: 0.32rem;
    }
    .allReplys{
        margin-top: 1.76rem;
        width: 100%;
    }
    .replys{
        width: 6.86rem;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
    }
    .reply{
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-bottom: .88rem;
    }
    .allInfo{
        display: flex;
    }
    .replyImg{
        width:.88rem;
        height: .88rem;
        background-color: #FFF;
        border-radius: 50%;
    }
    .replyInfo{
        margin-left: .2rem;
        display: flex;
        flex-direction: column;
    }
    .user{
        display: flex;
        align-items: center;
    }
    .name{
        color: #333333;
        font-size: .28rem;
        font-family: 'PingFangSC-Mediuem';
    }
    .time{
        margin-left: .2rem;
        font-size: .24rem;
        color: #999999;
        font-family: 'PingFangSC-Regular';
    }
    .haveReply{
        margin-top: .16rem;
        font-size: .24rem;
        color: #999999;
        font-family: 'PingFangSC-Regular';
        display: flex;
        align-items: center;
    }
    .haveReply span{
        display: block;
        margin-left: .1rem;
        color: #333333;
        font-size: .26rem;
        font-family: 'PingFangSC-Mediuem';
    }
    .comment{
        margin-top: .1rem;
        font-size: .24rem;
        color: #999999;
        font-family: 'PingFangSC-Regular';
        border-left: 3px solid #a9a9a94d;
        display: flex;
        align-items: center;
    }
    .commentContent{
        margin-left: .2rem;
    }
    .toReplyContainer{
        display: flex;
        flex-direction: column;
        width: 1.2rem;
        height: 1.7rem;
        justify-content: space-between;
    }
    .replyContent{
        margin-left: .28rem;
        width:.92rem;
        height: .92rem;
        color: #999999;
        font-family: 'PingFangSC-Regular';
        font-size: .18rem;
    }
    .toReply{
        display: flex;
        align-items: center;
    }
    .toReplyImg{
        background-image: url(../assets/img/tab+logo@2x/message.png);
        width: .32rem;
        height: .32rem;
        background-position: center;
        background-size: contain;
    }
    .toReplyTitle{
        margin-left: .1rem;
        font-size: .24rem;
        color: #999999;
        font-family: 'PingFangSC-Regular';
    }
    .noMore{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .24rem;
        color: #999999;
        font-family: 'PingFangSC-Regular';
    }
</style>